<template>
  <view class="login-register">
    <view class="login-item bdb2a mgb40">
      <view class="input-item between-box">
        <slot></slot>
        <view class="" @click="clearInput(clearData)">
          <view v-if="info[clearData]" class="">
            <server-image
              class="img50 v-align-m"
              :name="'euro/' + themeType + '/20230327001.png'"
              mode="aspectFill"
            ></server-image>
          </view>
        </view>
        <view v-if="showCipher" class="flex-align">
          <view class="line mgl20 mgr20 bg-2a"></view>
          <view class="" @click="showPasswordClick">
            <view v-if="!showPassword" class="">
              <server-image
                class="img48 v-align-m"
                :name="'euro/' + themeType + '/20230327003.png'"
                mode="aspectFill"
              ></server-image>
            </view>
            <view v-else class="">
              <server-image
                class="img48 v-align-m"
                :name="'euro/' + themeType + '/20230327002.png'"
                mode="aspectFill"
              ></server-image>
            </view>
          </view>
        </view>
        <!-- 获取验证码倒计时 -->
        <view
          v-if="showGetting"
          class="flex-box bd45 color45 h60 radius30 fs26 minw130 mgl24 box-b pdl30 pdr30"
          @click="getCode"
        >
          <text v-if="!smsGetting">{{ i18n.captchaGet }}</text>
          <tui-countdown
            :hours="false"
            :minutes="false"
            :isColon="false"
            :prefixZero="false"
            v-else
            unitEn
            color="#454CED"
            :size="26"
            borderColor="transparent"
            backgroundColor="transparent"
            colonColor="#454CED"
            :formRegister="true"
            :time="countDown"
            @end="endOfTime"
          ></tui-countdown>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import tuiCountdown from '@/components/thorui/tui-countdown/tui-countdown';

export default {
  name: 'LoginForm',
  components: {
    tuiCountdown,
  },
  props: {
    info: {
      type: Object,
      default() {
        return [];
      },
    },
    clearData: {
      type: String,
      default: '',
    },
    showPassword: {
      type: Boolean,
      default: false,
    },
    showCipher: {
      type: Boolean,
      default: false,
    },
    showGetting: {
      type: Boolean,
      default: false,
    },
    telCode: {
      type: String,
      default: '',
    },
    countryCodeIndex: {
      type: Number,
      default: 0,
    },
    showDefault: {
      type: Boolean,
      default: true,
    },
    // 验证码接口
    sendType: {
      type: Number,
      default: 1,
    },
    // 是否获取邮箱验证码
    showEmail: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      countDown: 120,
      smsGetting: false,
      allowGetCode: true,
    };
  },
  computed: {
    ...mapState({
      countryCodeList: (state) => state.countryCode || [],
    }),
    countryCodeTxtList: function () {
      return this.countryCodeList.map((v) => v.code);
    },
    i18n() {
      return this.$t('login');
    },
  },
  methods: {
    clearInput(clearData) {
      // this.$emit('clearInput',clearData)
      this.info[clearData] = '';
      this.resetShow(true);
    },
    showPasswordClick(showPassword) {
      // this.$emit('showPasswordClick',this.showPassword)
      if (!this.info[this.clearData]) return;
      this.resetShow(this.showPassword);
    },
    resetShow(showPassword) {
      this.$emit('showPasswordClick', showPassword);
    },
    endOfTime() {
      this.smsGetting = false;
      this.countDown = 120;
    },
    async getCode() {
      const that = this;
      if (!this.allowGetCode) return;

      let params = {};
      if (!this.showEmail) {
        if (!this.info.name) {
          that.showMessage({ title: this.i18n.enterPhone });
          return;
        } else if (!/[1-11]\d*$/.test(this.phoneNum)) {
          // that.showMessage({title: 'Please input the correct mobile phone number'})
          // return
        }
        let telCodeName = '';
        if (this.showDefault) {
          telCodeName = this.telCode + this.info.name;
        } else {
          telCodeName = this.countryCodeTxtList[this.countryCodeIndex] + this.info.name;
        }
        // console.log("telCodeName",telCodeName)
        let mobile = await this.sysEncrypt(telCodeName);
        params = {
          mobile: mobile,
        };
      } else {
        if (!this.info.email) {
          that.showMessage({ title: this.i18n.enterMailbox });
          return;
        }
        let email = await this.sysEncrypt(this.info.email);
        params = {
          email: email,
        };
      }

      this.allowGetCode = false;
      let request = null;
      if (that.sendType == 1) {
        request = that.apiUrl.sendSmsCode({ data: params });
      } else {
        request = that.apiUrl.sendPwdSmsCode({ data: params });
      }
      request
        .then((res) => {
          const { code,msg:message='' } = res.data
          that.showMessage({ title: message });
          if (code != 0) {
            that.smsGetting = false;
          } else {
            that.smsGetting = true;
          }
        })
        .finally(() => {
          setTimeout(() => {
            that.allowGetCode = true;
          }, 1500);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/pages/login/login';
</style>
